<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>商品分类</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/layer.css" />
    <link rel="stylesheet" type="text/css" href="../css/mdw.css" />
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../script/swiper.min.js"></script>
    <script type="text/javascript" src="../script/mobile.js"></script>
    <script type="text/javascript" src="../script/layer.js"></script>
    <script type="text/javascript" src="../script/mdw.js"></script>
    <script type="text/javascript" src="../script/jumpPage.js"></script>

</head>
<body>
    <header class="header classifyHeader">
        <div class="backPrevPage" onclick="historyBack()"></div>
        <div class="classifyType">
            <div class="ctype" onclick="openWin('classify','classify.html')" >商品分类</div>
            <div class="ctype on">商家店铺</div>
        </div>
    </header>
    <section class="classifyPage HTML_BOX">
        <ul class="classifType2 plr">

        </ul>
        <div class="marginBox" class="bg-eee" style="border-bottom:.2rem solid #EEE ; "></div>
        <div class="classifyList">
            <ul class="classify_Left">
               
            </ul>
            <div class="classify_Right">
                 <div class="classify_title f_c"><span></span>商家列表<span></span></div>
                <ul class="list">
                   
                </ul>
            </div>
            </div>

        </div>
    </section>
    <!-- 底部导航 -->
    <section class="sectionH"></section>
    <section class="navigation">
    <ul>
      <li onclick="openWin('index','index.html')">
          <span class="icon"></span>
          <p id="nav1">首页</p>
      </li>
      <li class="on">
          <span class="icon"></span>
          <p id="nav2">分类</p>
      </li>
      <li onclick="openWin('groupBuy','groupBuy.html')">
          <span class="icon"></span>
          <p id="nav3">拼团</p>
      </li>
      <li  onclick="shoppingCart()">
          <span class="icon"></span>
          <p id="nav4">购物车</p>
      </li>
      <li  onclick="member()">
          <span class="icon"></span>
          <p id="nav5">我的</p>
      </li>
    </ul>
</section>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
    var param;
    var type1 = 0;
    var type2 = 0;
    apiready = function(){
        $api.fixStatusBar($api.dom('header'));
        api.setStatusBarStyle({
            color: '#fff',//设置APP状态栏背景色
            style: 'dark'
        });
        ifCnAndEn();
        var header = $(".header").height();
        var classifType2 = $(".classifType2").height();
        var navigation = $(".navigation").height();
        var marginBox = $(".marginBox").height();
        var body = window.screen.availHeight;
        var i = header + classifType2 + navigation + marginBox;
        var c = body-i;
        $(".classifyList").css("height",c);
        param = api.pageParam;
        ready();
    };

    function ready(){
        getAjax(Interface.category_first,{},function(res){
             $.each(res.data,function(i,item){
                var html ='';
                if(item.id == 86 || item.id == 81){return true;}
                if(param.id!="" && param.id!=null){
                    if(item.id==param.id){
                        html ='<li class="on" onclick="chooseType1(this,'+item.id+')">'+item.title+'</li>';
                    }else{
                        html ='<li class="" onclick="chooseType1(this,'+item.id+')">'+item.title+'</li>';
                    }
                }else{
                    if(i==0){
                        param.id = item.id;
                        html ='<li class="on" onclick="chooseType1(this,'+item.id+')">'+item.title+'</li>';
                    }else{
                        html ='<li class="" onclick="chooseType1(this,'+item.id+')">'+item.title+'</li>';
                    }
                }
                $(".classifType2").append(html);
             })
             type1 = param.id;
             getType2(param.id);
        })
    }
    function chooseType1(dom,id){
        $(".classifType2 li").removeClass("on");
        $(dom).addClass("on");
        type1 = id;
        getType2(id);
    }
     function chooseType2(dom,id){
         $(".classify_Left li").removeClass("on");
        $(dom).addClass("on");
        type2 = id;
        getType3(id);
    }

    function getType2(id){
        getAjax(Interface.category_two,{pid:id},function(res){
            $(".classify_Left").empty();
             $.each(res.data,function(i,item){
                    var html ='';
                    if(i==0){
                        html ='<li onclick="chooseType2(this,'+item.id+')" class="on">'+item.title+'</li>';
                        type2 = item.id;
                        getType3(item.id);
                    }else{
                        html ='<li onclick="chooseType2(this,'+item.id+')">'+item.title+'</li>';
                    }
                $(".classify_Left").append(html);
             })
        })
    }

    function getType3(id){
        getAjax(Interface.category_three,{pid:id,type:2},function(res){
            console.log(JSON.stringify(res));
            $(".list").empty();
            list = [];
            if(res.data !="" && res.data !=null){
                list = res.data;
                $.each(res.data,function(i,item){
                    var name = item.username;
                    if(cnen ==2){
                        name = item.egusername;
                    }
                    var html ='<li onclick="goClass(\''+item.id+'\','+i+')" class="typeli shopli"> <div class="imageBox"><img src="'+getImg(item.icon)+'" /></div><div class="f_c">'+name+'</div>'+
                         ' </li>';
                $(".list").append(html);
             })
            }
        })
    }
    var list =[];
    function goClass(id,i){
        var p ={
            sdid:id,
            type1:type1,
            type2:type2
        }
        openWin('shop','shop.html',p);
    }
</script>
<script type="text/javascript">
    function ifCnAndEn(){
        if(cnen==2){
            $(".classifyType .ctype").eq(0).html('Departments');
            $(".classifyType .ctype").eq(1).html('Stores');
            $("#nav1").html('Home');
            $("#nav2").html('Departments');
            $("#nav3").html('Deals');
            $("#nav4").html('Cart');
            $("#nav5").html('Account');
            $(".classify_title").html('<span></span>Stores<span></span>');
        }
    }
</script>
</html>
